<template>
  <div class="report-content">
    <div class="report-header">
      <!-- 标题部分 -->
      <div class="report-title">
        <el-icon><Document /></el-icon>
        <span class="title-text">全市在途车辆统计</span>
      </div>
      <!-- 操作按钮 -->
      <div class="header-actions">
        <el-button class="export-btn" type="primary" @click="exportData">
          导出报表
        </el-button>
        <el-button @click="toggleSearchForm">
          <i class="el-icon-view" />
          {{ showSearchForm ? '隐藏' : '显示' }}查询
        </el-button>
      </div>
    </div>
    
    <!-- 表格组件 -->
    <el-table 
      v-loading="loading" 
      :data="tableData" 
      style="width: 100%" 
      border 
      class="traffic-table" 
      :header-cell-style="{ background: '#f0f4f9', color: '#606266' }"
    >
      <el-table-column prop="index" label="序号" width="80" align="center" />
      <el-table-column prop="date" label="日期" min-width="120" align="center" />
      <el-table-column prop="total" label="过江总量" min-width="120" align="center">
        <template #default="scope">
          <span>{{ formatNumber(scope.row.total) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="avgSpeed" label="平均时速(km/h)" min-width="140" align="center" />
      <el-table-column prop="changeRate" label="同比" min-width="100" align="center">
        <template #default="scope">
          <span class="change-rate-down">{{ scope.row.changeRate }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="largeVehicles" label="大型车合计" width="120" align="center">
        <template #default="scope">
          <span>{{ formatNumber(scope.row.largeVehicles) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="smallVehicles" label="小型车合计" width="120" align="center">
        <template #default="scope">
          <span>{{ formatNumber(scope.row.smallVehicles) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="urbanLarge" label="市内大型车" width="120" align="center">
        <template #default="scope">
          <span>{{ formatNumber(scope.row.urbanLarge) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="urbanSmall" label="市内小型车" width="120" align="center">
        <template #default="scope">
          <span>{{ formatNumber(scope.row.urbanSmall) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="urbanTotal" label="市内合计" width="120" align="center">
        <template #default="scope">
          <span>{{ formatNumber(scope.row.urbanTotal) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="suburbanLarge" label="市外大型车" width="120" align="center">
        <template #default="scope">
          <span>{{ formatNumber(scope.row.suburbanLarge) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="suburbanSmall" label="市外小型车" width="120" align="center">
        <template #default="scope">
          <span>{{ formatNumber(scope.row.suburbanSmall) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="suburbanTotal" label="市外合计" width="120" align="center">
        <template #default="scope">
          <span>{{ formatNumber(scope.row.suburbanTotal) }}</span>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.currentPage" 
        v-model:page-size="pagination.pageSize" 
        :page-sizes="pagination.pageSizes"
        layout="total, sizes, prev, pager, next, jumper" 
        :total="pagination.total" 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="js">
import { defineProps } from 'vue'

// 定义props
const props = defineProps({
  tableData: {
    type: Array,
    required: true
  },
  loading: {
    type: Boolean,
    required: true
  },
  pagination: {
    type: Object,
    required: true
  },
  showSearchForm: {
    type: Boolean,
    required: true
  },
  exportData: {
    type: Function,
    required: true
  },
  toggleSearchForm: {
    type: Function,
    required: true
  },
  handleCurrentChange: {
    type: Function,
    required: true
  },
  handleSizeChange: {
    type: Function,
    required: true
  }
})

// 格式化数字显示
function formatNumber(num) {
  if (num === null || num === undefined) return "-"
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
</script>

<style scoped lang="scss">
// 自定义变量
$primary-color: #1890ff;
$success-color: #52c41a;
$danger-color: #f5222d;
$text-regular: #666666;
$border-color: #e8e8e8;
$transition-base: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

.report-content {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background-color: #ffffff;
  border-bottom: 1px solid $border-color;
}

.report-title {
  display: flex;
  align-items: center;
  gap: 8px;

  .title-text {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
  }
}

.header-actions {
  display: flex;
  gap: 12px;
}

.export-btn {
  transition: $transition-base;
}

.traffic-table {
  margin: 0;

  .el-table__row {
    transition: $transition-base;

    &:hover {
      background-color: #f5f7fa;
    }
  }

  .el-table__body-wrapper {
    overflow-x: auto;
  }

  .change-rate-down {
    color: $danger-color;
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid $border-color;
  background-color: #ffffff;
}
</style>